<style scoped lang="less">
    @import '../styles/user.css';
</style>
<template>
    <div class="page-wrap page-profile page-user" id="page-profile">
    <div class="m-user">
        <header-component :page-name="pageName">
            <a href="javascript:;" class="m-simpleHeader-ok" data-href="./" v-link="{path:'/home'}"><i class="ico ico-home"></i></a>
        </header-component>
        <div class="m-user-index">
            <div class="m-user-summary m-user-summary-simple">
                <div class="info">
                    <div class="m-user-avatar"><img width="50" height="50" :src="user.photo"></div>
                    <div class="txt">
                        <div class="name">{{user.name}}</div>
                        <div class="id">ID：{{user.id}}</div>
                    </div>
                </div>
            </div>
            <div class="w-nav w-nav-hasSplt w-nav-hasBorder">
                <div :class="['w-nav-item',type==''?'w-nav-item-on':'']" @click="type=''" ><span class="w-nav-txt">拼宝记录<span class="num"></span></span>
                </div>
                <div :class="['w-nav-item',type=='win'?'w-nav-item-on':'']" @click="type='win'" ><span class="w-nav-txt">中奖记录</span></div>
                <div :class="['w-nav-item',type=='share'?'w-nav-item-on':'']" @click="type='share'"  ><span class="w-nav-txt">晒单</span></div>
            </div>
        </div>
        <template v-if="type=='share'">
            <div class="m-user-shareList">
                <div class="w-shareList" id="profileList">
                    <tpl-share :item="i" v-for="(k,i) in item"></tpl-share>
                </div>
                <div class="w-more" id="profileListMore" v-el:get-profile-list-more>
                    <template v-if="hasMore && item.length>0">
                        <b class="ico ico-loading"></b> 努力加载中
                    </template>
                    <template v-if="!hasMore && item.length>0">
                        没有更多了
                    </template>
                    <template v-if="page==0 && item.length==0">
                        {{tip}}
                    </template>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="m-user-duobaoRecord">
                <ul class="w-goodsList w-goodsList-l m-user-goodsList" id="profileList">
                    <template v-if="type==''">
                        <tpl-record :item="i" v-for="(k,i) in item"></tpl-record>
                    </template>
                    <template v-else>
                        <tpl-win :item="i" v-for="(k,i) in item"></tpl-win>
                    </template>
                </ul>
                <div class="w-more" id="profileListMore" v-el:get-profile-list-more>
                    <template v-if="hasMore&&item.length>0">
                        <b class="ico ico-loading"></b> 努力加载中
                    </template>
                    <template v-if="!hasMore&&item.length>0">
                        没有更多了
                    </template>
                    <template v-if="page==0&&item.length==0">
                        {{tip}}
                    </template>
                </div>
            </div>
        </template>
        <div class="m-user-wishList" style="display: none;" afmoldstyle="block">
            <div class="m-user-blank">没有心愿单哦~</div>
        </div>
    </div>
    </div>
</template>
<script>
    import User from '../module/user'
    import headerComponent from '../components/header'
    import tplRecord from '../components/tpl_profile_record'
    import tplShare from '../components/tpl_profile_share'
    import tplWin from '../components/tpl_profile_win'
    export default {
        filters: {},
        directives: {},
        components: {

            headerComponent,
            tplRecord,
            tplShare,
            tplWin,

        },

        route:{

            canReuse(transition){

                if (!!this.$route.query.id && this.id!=this.$route.query.id) {

                    return false;

                }

            }

        },

        watch:{
            async type(val){

                this.page = 0;

                this.hasMore = true;

                this.loading = false;

                this.item.splice(0,this.item.length);

                switch(val){
                    case 'win':
                        this.tip = '该用户还没有中奖纪录';
                        break;
                    case 'share':
                        this.tip = '该用户还没有晒单纪录';
                        break;
                    case '':
                    default:
                        this.tip = '该用户还没有拼宝纪录';
                        break;
                }

                await this.loadMore()


            }
        },

        data () {
            return {

                pageName:'个人中心',
                loading:false,
                hasMore:true,
                page:0,
                id:'',
                type:'',
                user:{},
                item:[],
                tip:'该用户还没有拼宝记录',

            }
        },
        created(){

            this.$dispatch('isLoading', true)

        },
        async ready () {

            console.log(this.$route)
            if (!!this.$route.query.id) {



                this.id = this.$route.query.id;


            }

            let res = await User.getOtherMessage(this.id);

            if (res.status == 200 && res.data && res.data.user) {

                this.user = Object.assign({},this.user,res.data.user);

            }

            await this.loadMore();

            this.$dispatch('isLoading', false);

            document.addEventListener('scroll',this.getMore,false);

        },

        beforeDestroy () {

            document.removeEventListener('scroll',this.getMore,false);

        },

        methods: {

            async loadMore(){

                if (this.loading) {

                    return;

                }

                this.loading = true;

                switch (this.type) {

                    case 'win' :

                        let record = await User.getOtherWinRecord(this.id,this.page);

                        if (record.status == 200 && record.data && record.data.item && record.data.item.length > 0) {

                            this.page++;

                            this.item.push(...record.data.item);

                            if(record.data.item.length < 10){

                                this.hasMore = false;

                            }

                        }

                        this.loading = false;
                        break;
                    case 'share' :

                        let share = await User.getShareList(this.id,this.page);



                        if (share.status == 200 && share.data && share.data.item && share.data.item.length > 0) {

                            this.page++;

                            this.item.push(...share.data.item);

                            if(share.data.item.length < 10){

                                this.hasMore = false;

                            }



                        }

                        this.loading = false;
                        break;
                    case '' :
                    default :
                        let data = await User.getBuyRecord(this.id,this.page);

                        if (data.status == 200 && data.data && data.data.item && (!!data.data.item.alreadyannounced || !!data.data.item.underway)) {


                            if (!!data.data.item.underway && data.data.item.underway.length>0) {
                                this.item.push(...data.data.item.underway);
                            }

                            if (!!data.data.item.alreadyannounced && data.data.item.alreadyannounced.length>0) {
                                this.item.push(...data.data.item.alreadyannounced);
                            }

                            this.page++;

                        } else {

                            this.hasMore = false;

                        }

                        this.loading = false;
                        break;

                }

            },

            async getMore(){

                var pos = this.$els.getProfileListMore.getBoundingClientRect();

                if (this.hasMore &&
                        ((pos.top > 0 && window.innerHeight - pos.top > 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {
                    await this.loadMore();
                }

            }
        }
    }
</script>
